<template>
	<view class="boxCav">
		<canvas canvas-id="hoCanvas" class="hoCanvas" v-if="canvasHeight" :style="{width:canvasWidth+'px',height:canvasHeight+'px'}"></canvas>
		<view class="saveBtn" v-if="showSave" @click="saveImg()">
			保存到相册
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				canvasWidth:375,
				canvasHeight:0,
				
				logo:'https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/17327917103031436.png',
				bgSrc:'https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/17331198452651461.png',
				bgSrc2:'https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1733120312582639.png',
				bgWidth:'',
				bgHeight:'',
				bgRatio:'',
				
				qrSrc:'',
				qrWidth:188,
				qrHeight:188,
				
				headSrc:'',
				headWidth:76,
				headHeight:76,
				
				userName:'用户昵称',
				
				qr:{},
				postUrl:'',
				Data:{},
				showSave:false,
                paID:'',
				pa_info:{},
			};
		},
		onLoad(e) {
			this.paID = e.id
		},
		created() {
			uni.showLoading({
				title: '海报正在生成...',
				icon: 'loading',
			});
			// this.Data = this.$store.state.golfScore
		},
		async mounted(){
            this.paDetail()
			await this.CreateShareQR()
			await this.getQR()
			
			this.drawFun()
		},

		methods:{
			async paDetail(){
                let res =await this.$api.post('Place/Detail',{
                    ID:this.paID
                })
                if(res.code == 0){
                    this.pa_info = res.data
                }
            },
			async CreateShareQR() {
			  let res = await this.$api.post("Action/CreateShareQR", {
			    Page: "pages/tab/home",
					scene:uni.getStorageSync('user').ID
			  });
			  this.qr = res.data;
			},
			getQR(){
				return new Promise((resolve,reject)=>{
					setTimeout(()=>{
						this.qrSrc = this.qr
						resolve(this.qrSrc)
					},1000)
				})
			},
			
			
			//二维码部分
			QrDraw(ctx,qr,logo){
				
				//二维码
				ctx.drawImage(qr,267,477,72,72)
				
			},
			drawFun(){
				const that = this
				//背景
				let promiseBg = new Promise((resolve,reject)=>{
					uni.getImageInfo({
						src:that.bgSrc,
						success: (res) => {
							that.bgWidth = res.width
							that.bgHeight = res.height
							that.bgRatio = res.width / res.height
							resolve(res)
						},
						fail: (err) => {
							console.log('promiseBg错误');
							this.$pv.msg('[Error]CreateBackground is Error')
							reject(err)
						}
					})
				});
                //背景2
                let promiseBg2 = new Promise((resolve,reject)=>{
					uni.getImageInfo({
						src: that.bgSrc2,
						success: (res) => {
							resolve(res)
						},
						fail: (err) => {
							console.log('promiseBg2错误');
							this.$pv.msg('[Error]CreateShareQR is Error')
							reject(err)
						},
					})
				})
				//二维码
				let promiseQR = new Promise((resolve,reject)=>{
					uni.getImageInfo({
						src: that.qrSrc,
						success: (res) => {
							resolve(res)
						},
						fail: (err) => {
							console.log('promiseQR错误');
							this.$pv.msg('[Error]CreateShareQR is Error')
							reject(err)
						},
					})
				})
				//icon
				let promiseicon = new Promise((resolve,reject)=>{
					uni.getImageInfo({
						src: 'https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/17329525852691481.png',
						success: (res) => {
							resolve(res)
						},
						fail: (err) => {
							console.log('promiseicon错误');
							this.$pv.msg('[Error]HeadImgUrl is Error')
							reject(err)
						},
					})
				})
				//banner
				let promisebanner = new Promise((resolve,reject)=>{
					uni.getImageInfo({
						src: that.pa_info.Banner,
						success: (res) => {
							resolve(res)
						},
						fail: (err) => {
							console.log('promisebanner错误');
							this.$pv.msg('[Error]Logo is Error')
							reject(err)
						},
					})
				})
				
				setTimeout(()=>{
					const query = uni.createSelectorQuery()
					//指定要获取的属性，这里设置为size: true表示要获取尺寸信息。
					query.select('.hoCanvas').fields({node:true,size:true},(res)=>{
						
						that.canvasWidth = 375
						that.canvasHeight = that.canvasWidth / that.bgRatio
						Promise.all([promiseBg,promiseBg2,promiseQR,promiseicon,promisebanner]).then(rex => {
							console.log('----------',rex);
							
							const ctx = uni.createCanvasContext('hoCanvas',this);
							// ctx.canvasWidth = this.canvasWidth; // 背景图片的实际宽度
							// ctx.canvasHeight = this.canvasHeight ;
							//绘制背景
							ctx.drawImage(rex[0].path,0,0,that.canvasWidth,that.canvasHeight)
                            //绘制背景2
							ctx.drawImage(rex[1].path,24,38,327,530)
                            //icon
							ctx.drawImage(rex[3].path,36,52,20,20)
                            //banner
							ctx.drawImage(rex[4].path,36,87,303,314)

                            ctx.font = "bold 18px Arial";
                            ctx.setFillStyle("#333333");
                            ctx.setStrokeStyle("#333333");
                            ctx.fillText(that.pa_info.PlaceName, 62, 69);

                            ctx.font = "12px Arial";
                            ctx.setFillStyle("#333333");
                            ctx.setStrokeStyle("#333333");
                            ctx.fillText('本馆浏览', 62, 451);
                            ctx.font = "12px Arial";
                            ctx.setFillStyle("#333333");
                            ctx.setStrokeStyle("#333333");
                            ctx.fillText('点赞人数', 163, 451);
                            ctx.font = "12px Arial";
                            ctx.setFillStyle("#333333");
                            ctx.setStrokeStyle("#333333");
                            ctx.fillText('吃货人数', 263, 451);

                            ctx.font = "bold 24px Arial";
                            ctx.setFillStyle("#5d8bf8");
                            ctx.setStrokeStyle("#5d8bf8");
                            ctx.fillText(that.pa_info.ViewNum, 57, 432);

                            ctx.font = "bold 24px Arial";
                            ctx.setFillStyle("#5d8bf8");
                            ctx.setStrokeStyle("#5d8bf8");
                            ctx.fillText(that.pa_info.ZAN, 159, 432);

                            ctx.font = "bold 24px Arial";
                            ctx.setFillStyle("#5d8bf8");
                            ctx.setStrokeStyle("#5d8bf8");
                            ctx.fillText(that.pa_info.PlaceData.FansNum, 261, 432);
                            //二维码
							this.QrDraw(ctx,rex[2].path)
							
							ctx.draw();
							
							setTimeout(()=>{
								uni.canvasToTempFilePath({
									x: 0,
									y: 0,
									width: that.canvasWidth,
									height:that.canvasHeight,
									destWidth: that.canvasWidth*2,
									destHeight: that.canvasHeight*2,
									canvasId: 'hoCanvas',
									success: function(res) {
										that.postUrl = res.tempFilePath;
										// that.saveImg();
										that.showSave = true
										// that.$emit('showSaveFun',true)
										if(that.postUrl){
											uni.hideLoading();
											// that.$emit('getCanvasImg',res.tempFilePath) 
										}
									},
									fail: function(err) {
										console.log(err);
									},
								},this);
							
							},500)
							
							
						}).catch(err => {
							uni.hideLoading()
							uni.showModal({
								title: '异常错误',
								content: '图片生成失败!!!\n[QRError:Damaged QR code]',
								showCancel: false,
								success: (res) => {
									if (res.confirm) uni.navigateBack()
								}
							})
						})
					}).exec()
				},1000)
			},
			saveImg(){
				const that = this;
				//将图片保存到相册
				uni.saveImageToPhotosAlbum({
					filePath: that.postUrl,
					success(res) {
						uni.showModal({
							title: '保存成功',
							content: '图片成功保存到相册了，快去分享朋友圈吧',
							showCancel: false,
							confirmText: '好的',
							success: function(res) {
								if (res.confirm) {}
								// that.hideShareImg()
							},
						});
					},
					fail(err) {
						console.log(err);
					}
				});
				console.log('保存');
			},
		}
	}
</script>

<style lang="scss">
page{
	// background: linear-gradient( 68deg, #FF8C27 0%, #FE3516 100%);
}
.boxCav{
	padding-bottom: 150rpx;
}
.hoCanvas{
	width: 350px;
	height: 650px;
	border-radius: 8rpx;
	overflow: hidden;
	margin: 20rpx auto;
}
.saveBtn{
		position: fixed;
		bottom: 10rpx;
		left: 50%;
		transform: translate(-50%,-50%);
		width: 90%;
		height: 96rpx;
		background: #FFFFFF;
		border-radius: 8px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: bold;
		font-size: 16px;
		color: #5d8bf8;
		z-index: 999;
	}
</style>
